var QcReportBoard = function () {
  var QcReportDetail = function () {
    var template = /* html */ `
      <div class="qcreport-detail">
        <el-table fit stripe border :data="detailList" style="width: 100%">
          <el-table-column label="内容" prop="content" min-width="140px" header-align="center"></el-table-column>
          <el-table-column label="默认值" prop="reportValues" min-width="140px" header-align="center"></el-table-column>
          <el-table-column label="结果" prop="result" width="60px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('productMgr.qcReport.result.'+scope.row.result)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    `;

    return {
      props: {
        report: {
          type: Object,
          required: true
        }
      },

      computed: {
        detailList: function () {
          var details = this.report.details;
          details = _.orderBy(details, ['rowIndex'], ['asc']);
          return details;
        }
      },

      data: function () {
        return {
          i18n: i18n
        };
      },

      template: template
    };
  }();

  var QcReportTable = function () {
    var template = /* html */ `
    <div class="qcreport-table">
      <div ref="qcreportTable">
        <div v-for="reportObj in reportList" :key="reportObj.id" class="qcreport-table-item">
          <div class="qcreport-table-head">
            <div>系统编号：{{reportObj.orderId}}</div>
            <div v-if="reportObj.companyOrderId!==''">
              订单编号：{{reportObj.companyOrderId}}
            </div>
            <div v-if="reportObj.factoryId!==''">
              工厂型号：{{reportObj.factoryId}}
            </div>
            <div v-if="reportObj.customerId!==''">
              客户型号：{{reportObj.customerId}}
            </div>
            <div v-if="reportObj.processName!==''">
              工序：{{reportObj.processName}}
            </div>
          </div>
          <div style="overflow:auto;">
            <table cellspacing="0" cellpadding="0">
              <thead>
                <tr>
                  <th style="min-width:100px">首件确认人</th>
                  <th style="min-width:100px">首件确认时间</th>
                  <th style="min-width:100px">自检人</th>
                  <th style="min-width:100px">自检时间</th>
                  <th style="min-width:100px">自检平均时间</th>
                  <th style="min-width:100px">自检空缺次数</th>
                  <th style="min-width:100px">巡检人</th>
                  <th style="min-width:100px">巡检时间</th>
                  <th style="min-width:100px">巡检平均时间</th>
                  <th style="min-width:100px">巡检空缺次数</th>
                  <th style="min-width:100px">生产人</th>
                  <th style="min-width:80px">合格数</th>
                  <th style="min-width:80px">不良数</th>
                </tr>
              </thead>
              <tbody>
                <template v-for="(item,index) in reportObj.typeCheckList">
                  <tr :key="'typeCheck_'+index" :class="{'odd':index%2!==0}">
                    <td @click="lookDetail(item.type1Check)">
                      <span v-if="item.type1Check">{{item.type1Check.createUser}}</span>
                    </td>
                    <td class="is-center no-warp" @click="lookDetail(item.type1Check)">
                      <span v-if="item.type1Check">
                        {{moment(item.type1Check.createTime).format('YYYY-MM-DD HH:mm:ss')}}
                      </span>
                    </td>
                    <td @click="lookDetail(item.type2Check)">
                      <span v-if="item.type2Check">{{item.type2Check.createUser}}</span>
                    </td>
                    <td class="is-center no-warp" @click="lookDetail(item.type2Check)">
                      <span v-if="item.type2Check">
                        {{moment(item.type2Check.createTime).format('YYYY-MM-DD HH:mm:ss')}}
                      </span>
                    </td>
                    <td class="is-center no-warp" @click="lookDetail(item.type2Check)">
                      <span v-if="item.type2Check">{{item.type2Check.avgTime}}</span>
                    </td>
                    <td class="is-center no-warp" @click="lookDetail(item.type2Check)">
                      <span v-if="item.type2Check" :class="{'is-follow':item.type2Check.vacancyCount>0}">
                        {{item.type2Check.vacancyCount}}
                      </span>
                    </td>
                    <td @click="lookDetail(item.type3Check)">
                      <span v-if="item.type3Check">{{item.type3Check.createUser}}</span>
                    </td>
                    <td class="is-center no-warp" @click="lookDetail(item.type3Check)">
                      <span v-if="item.type3Check">
                        {{moment(item.type3Check.createTime).format('YYYY-MM-DD HH:mm:ss')}}
                      </span>
                    </td>
                    <td class="is-center no-warp" @click="lookDetail(item.type3Check)">
                      <span v-if="item.type3Check">{{item.type3Check.avgTime}}</span>
                    </td>
                    <td class="is-center no-warp" @click="lookDetail(item.type3Check)">
                      <span v-if="item.type3Check" :class="{'is-follow':item.type3Check.vacancyCount>0}">
                        {{item.type3Check.vacancyCount}}
                      </span>
                    </td>
                    <td>
                      <span v-if="item.type4Check">{{item.type4Check.createUser}}</span>
                    </td>
                    <td class="is-center no-warp">
                      <span v-if="item.type4Check">{{item.type4Check.qualifiedCount}}</span>
                    </td>
                    <td class="is-center no-warp">
                      <span v-if="item.type4Check" :class="{'is-follow':item.type4Check.noQualifiedCount>0}">
                        {{item.type4Check.noQualifiedCount}}
                      </span>
                    </td>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <el-dialog append-to-body title="质检内容" :visible.sync="openDetail" width="400px" top="15vh" @closed="selectReport=null">
        <div style="height:calc(70vh - 54px);overflow:auto">
          <qc-report-detail v-if="openDetail" :report="selectReport"></qceport-detail>
        </div>
      </el-dialog>
    </div>
  `;

    return {
      mixins: [boardRunningMixin],

      props: {
        report: {
          type: Object,
          required: true
        }
      },

      watch: {
        changeData: function (newObj, oldObj) {
          if (newObj.reportList !== oldObj.reportList) {
            this.clearTimeoutList();
            this.resetReportList();
            this.boardRunning();
          } else {
            this.resetReportList();
          }
        }
      },

      computed: {
        changeData: function () {
          var report = this.report;
          return {
            rowIndex: report.rowIndex,
            reportList: report.reportList
          };
        }
      },

      data: function () {
        return {
          reportList: [],
          openDetail: false,
          selectReport: null,
          moment: moment
        };
      },

      created: function () {
        this.resetReportList();
      },

      mounted: function () {
        this.boardRunning();

        var self = this;
        $(this.$el).resize(function () {
          self.clearTimeoutList();
          if (!self.checkRowMove()) {
            self.report.rowIndex = 0;
          }
          self.boardRunning();
        });
      },

      methods: {
        resetReportList: function () {
          var report = this.report;
          var reportList = report.getReportData();
          this.reportList = reportList;
        },

        boardRunning: function () {
          this.clearTimeoutList();

          this.rowIndexRunning();
        },

        rowIndexRunning: function () {
          var self = this;
          var timeout = setTimeout(function () {
            if (self.checkRowMove()) {
              self.report.addRowIndex();
            }
            self.timeoutList[0] = null;
            self.rowIndexRunning();
          }, 10 * 1000);
          this.timeoutList[0] = timeout;
        },

        checkRowMove: function () {
          var qcreportTable = this.$refs['qcreportTable'];
          if (qcreportTable === undefined) {
            return false;
          }

          var totalHeight = $(this.$el).height();
          var tableHeight = $(qcreportTable).height();
          return totalHeight < tableHeight;
        },
        lookDetail: function (typeCheck) {
          if (!typeCheck) {
            return;
          }

          this.selectReport = typeCheck;
          this.openDetail = true;
        }
      },

      components: {
        QcReportDetail: QcReportDetail
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="qr-report-board" v-loading.fullscreen.lock="loading">
      <search-btns has-search ref="searchBtns" search-btn-text="查询" search-title="查询条件" @after-leave="afterLeave" mode="dialog">
        <div slot="search" slot-scope="scope">
          <search-form :search="search" :dropdown-data="dropdownData" :is-show="scope.visible" @search-data="searchData"></search-form>
        </div>
      </search-btns>
      <div class="qrreport-board-title">
        QC质检数据
      </div>
      <div class="qrreport-board-content" v-if="isShow">
        <template v-if="reportData!==null">
          <qc-report-table :report="reportData"></qc-report-table>
        </template>

        <div v-else class="no-data">
          暂无质检数据
        </div>
      </div>
    </div>
  `;

  return {
    mixins: [boardRunningMixin],

    data: function () {
      return {
        loading: false,
        isShow: false,
        reportData: null,
        search: new QcReportSearchModel(),
        dropdownData: []
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.initData(true).then(function () {
        self.loading = false;
        self.isShow = true;
        self.boardRunning();
      }).catch(function () {
        self.loading = false;
        self.isShow = true;
      });
    },

    methods: {
      initData: function (hasAlert) {
        var self = this;
        return ajaxRequest('materialSelectFilter/getMaterialSelectData', {
          type: 31
        }, true, hasAlert).then(function (dropdownData) {
          self.dropdownData = dropdownData;

          var search = self.search;
          search.resetSearch(dropdownData);
          return self.setReportList(hasAlert);
        });
      },

      setReportList: function (hasAlert) {
        if (hasAlert === undefined) {
          hasAlert = false;
        }

        var search = this.search;
        var postData = search.getObject();

        var self = this;
        return ajaxRequest('displayView/getQCDisplay', postData, true, hasAlert).then(function (reportList) {
          if (reportList.length === 0) {
            self.reportData = null;
            return null;
          }

          var reportData = self.reportData;
          if (reportData === null) {
            reportData = new QcReportInfo(reportList);
            self.reportData = reportData;
          } else {
            reportData.resetData(reportList);
            reportData.resetRowIndex();
          }
          return reportData;
        });
      },

      afterLeave: function () {
        this.search.resetOldData();
      },

      searchData: function () {
        var search = this.search;
        search.saveOldData();
        this.$refs['searchBtns'].closePopover();
        this.clearTimeoutList();

        this.loading = true;
        var self = this;
        this.setReportList().then(function () {
          self.loading = false;
          self.boardRunning();
        }).catch(function () {
          self.loading = false;
        });
      },

      boardRunning: function () {
        this.clearTimeoutList();

        this.resetReportListRunning();
      },

      resetReportListRunning: function () {
        var self = this;
        var timeout = setTimeout(function () {
          self.initData().then(function () {
            self.resetReportListRunning();
          }).catch(function () {});
          self.timeoutList[0] = null;
        }, 15 * 60 * 1000);
        this.timeoutList[0] = timeout;
      }
    },

    components: {
      SearchBtns: SearchBtns,
      SearchForm: QcReportSearchForm,
      QcReportTable: QcReportTable
    },

    template: template
  };
}();
